<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cyxq, cyxq1, cyxq2, cyxzSave, jsVoucher } from "@/http/api";
import upMoreImg from "@/components/public/upMoreImg.vue";
import tableBigImg from "@/components/public/tableBigImg.vue";

export default {
  components: { outMain, upMoreImg, tableBigImg },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {},
      fileImg: [],
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "薪酬结算", id: 2 },
        { name: "他的证书", id: 3 },
      ],
      stepId: 1,
      tableData: [],
      queryData: {
        cy_sign_id: this.$route.query.id,
        search: "",
        page: 1,
        per_page: 20,
      },
      total: 0,
      upRow: {},
      showUpRow: false,
      upImgFiles: "",
    };
  },
  props: {},
  setup() {},
  methods: {
    linkFn(url, id, navId) {
      if (id != 0) {
        this.$router.push({ path: url, query: { id: id, navId: navId } });
      }
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id !== 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId === 2) {
        this.getMoneyRecord();
      } else if (this.stepId === 3) {
        this.getBookFn();
      }
    },
    async getMoneyRecord() {
      const { data } = await cyxq1(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    daysBetween(date1, date2) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const firstTime = date1.getTime();
      const secondTime = date2.getTime();
      return Math.round((secondTime - firstTime) / oneDay);
    },
    async getBookFn() {
      const { data } = await cyxq2(this.queryData);
      if (data.code == 1) {
        let arr = data.data;
        for (let item of arr) {
          if (item.time) {
            item["time_"] = this.daysBetween(new Date(), new Date(item.time));
          } else {
            item["time_"] = "- -";
          }
        }
        this.tableData = arr;
        this.total = data.data.length;
      }
    },
    getData() {
      cyxq({ cy_sign_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;

          if (this.formData.qy_fj) {
            this.fileImg = this.formData.qy_fj.split(",");
          }
        }
      });
    },
    detailFn(id) {
      this.$router.push({ path: "/bootMoneyDetail", query: { id: id } });
    },
    upImg(row) {
      this.upRow = row;
      this.showUpRow = true;
      this.upImgFiles = "";
    },
    getImg(url) {
      this.upImgFiles = url;
    },
    saveUpImg() {
      if (!this.upImgFiles) {
        ElMessage({
          type: "error",
          message: "请上传结算的凭证图片",
        });
        return false;
      }
      let data = {
        shipowner_manage_money_id: this.upRow.shipowner_manage_money_id,
        jsxz_img: this.upImgFiles,
      };
      jsVoucher(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "操作成功",
          });
          this.getMoneyRecord();
          this.showUpRow = false;
        }
      });
    },
    subFn(row) {
      ElMessageBox.confirm(
        `确定为船员${this.formData.qy_real_name}办理${row.content}的薪酬结算吗?`,
        "操作提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let data = {
          shipowner_manage_money_id: row.shipowner_manage_money_id,
        };
        cyxzSave(data).then((res) => {
          if (res.data.code == 1) {
            ElMessage({
              type: "success",
              message: "操作成功",
            });
            this.getMoneyRecord();
          }
        });
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船员签约详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 1">
            <div class="formDes">
              <div class="desTitle">签约信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">签约单号</div>
                  <div class="desText">{{ formData.cy_sign_number }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员姓名</div>
                  <div class="desText">{{ formData.qy_real_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">签约岗位</div>
                  <div class="desText">
                    <span
                      class="linkText_"
                      @click="linkFn('workListDetail', formData.qy_position_id)"
                    >
                      {{ formData.qy_position_name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员手机号</div>
                  <div class="desText">{{ formData.qy_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">身份证号</div>
                  <div class="desText">{{ formData.qy_idcard }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">任职状态</div>
                  <div class="desText">
                    <el-tag type="success" v-if="formData.lz_sh_status == 0"
                      >在职</el-tag
                    >
                    <el-tag v-if="formData.lz_sh_status == 1">离职中</el-tag>
                    <el-tag type="info" v-if="formData.lz_sh_status == 2"
                      >已离职</el-tag
                    >
                  </div>
                </div>

                <div class="desItem">
                  <div class="desName">管理模式</div>
                  <div class="desText">
                    <el-tag v-if="formData.qy_glms == 1">企业代管</el-tag>
                    <el-tag type="info" v-if="formData.qy_glms == 2"
                      >船东自管</el-tag
                    >
                    <el-tag type="warning" v-if="formData.qy_glms == 3"
                      >企业自管</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">介绍费</div>
                  <div class="desText">
                    {{ formData.qy_cyxz_dw == 1 ? "¥" : "$"
                    }}{{ formData.qy_jsf }}(一次性)
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">管理费</div>
                  <div class="desText">
                    {{ formData.qy_cyxz_dw == 1 ? "¥" : "$"
                    }}{{ formData.qy_glf }}/月
                  </div>
                </div>

                <div class="desItem">
                  <div class="desName">船员薪资</div>
                  <div class="desText">
                    {{ formData.qy_cyxz_dw == 1 ? "¥" : "$"
                    }}{{ formData.qy_cyxz }}/月
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">社保费用</div>
                  <div class="desText">
                    {{ formData.qy_cyxz_dw == 1 ? "¥" : "$"
                    }}{{ formData.qy_sbfy }}/月
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">社保缴纳时间</div>
                  <div class="desText">每月{{ formData.qy_sbjnsj }}号</div>
                </div>

                <div class="desItem">
                  <div class="desName">邮寄证书</div>
                  <div class="desText">
                    <el-tag v-if="formData.qy_zsyjzt == 1">已邮寄</el-tag>
                    <el-tag type="danger" v-if="formData.qy_zsyjzt == 2"
                      >未邮寄</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">是否体检</div>
                  <div class="desText">
                    <el-tag v-if="formData.qy_tjzt == 1">已邮寄</el-tag>
                    <el-tag type="danger" v-if="formData.qy_tjzt == 2"
                      >未邮寄</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">签订合同</div>
                  <div class="desText">
                    <el-tag v-if="formData.qy_htqyzt == 1">已邮寄</el-tag>
                    <el-tag type="danger" v-if="formData.qy_htqyzt == 2"
                      >未邮寄</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">证书等级</div>
                  <div class="desText">{{ formData.qy_zsdj }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船东公司</div>
                  <div class="desText">
                    <span
                      :class="formData.qy_enterprise_id == 0 ? '' : 'linkText_'"
                      @click="
                        linkFn(
                          'cooperationBooterDetail',
                          formData.qy_enterprise_id
                        )
                      "
                    >
                      {{ formData.qy_enterprise_name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船东电话</div>
                  <div class="desText">{{ formData.enterprise_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶名称</div>
                  <div class="desText">{{ formData.qy_watercraft_name }}</div>
                </div>

                <div class="desItem">
                  <div class="desName">船舶类型</div>
                  <div class="desText">{{ formData.qy_watercraft_type }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">航区</div>
                  <div class="desText">{{ formData.qy_watercraft_area }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">载货量</div>
                  <div class="desText">
                    {{ formData.qy_watercraft_num
                    }}{{ formData.qy_watercraft_dw }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">上船时间</div>
                  <div class="desText">{{ formData.qy_scsj }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">签约时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">审批时间</div>
                  <div class="desText">- -</div>
                </div>
                <div class="desItem">
                  <div class="desName">离职时间</div>
                  <div class="desText">{{ formData.lz_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">离职原因</div>
                  <div class="desText">{{ formData.lz_reason || "- -" }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">签约备注</div>
                  <div class="desText">
                    {{ formData.qy_remark ? formData.qy_remark : "- -" }}
                  </div>
                </div>
              </div>
            </div>
            <div class="formDes">
              <div class="desTitle">关联信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">中介公司</div>
                  <div class="desText">
                    <span
                      :class="
                        formData.qy_zj_enterprise_id == 0 ? '' : 'linkText_'
                      "
                      @click="
                        linkFn(
                          'cooperationBooterDetail',
                          formData.qy_zj_enterprise_id
                        )
                      "
                    >
                      {{ formData.qy_zj_enterprise_name || "- -" }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">中介抽成比例</div>
                  <div class="desText">{{ formData.qy_zjccbl || "- -" }}%</div>
                </div>
                <div class="desItem">
                  <div class="desName">签约员工</div>
                  <div class="desText">
                    <span
                      :class="formData.qy_staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', formData.qy_staff_id)"
                    >
                      {{ formData.qy_staff_name }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="formDes" v-if="fileImg.length > 0">
              <div class="desTitle">附件资料</div>
              <div class="desCont">
                <div
                  class="desImgItem"
                  :key="index"
                  v-for="(item, index) in fileImg"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    fit="cover"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员薪酬结算记录（{{ total }}）</div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="js_order_number"
                  width="220"
                  show-overflow-tooltip
                  label="结算单号"
                />
                <el-table-column
                  prop="content"
                  show-overflow-tooltip
                  label="结算月份"
                />
                <el-table-column
                  prop="xz_money"
                  show-overflow-tooltip
                  label="结算薪资"
                >
                  <template #default="{ row }"
                    >{{ row.xz_money_dw == 1 ? "¥" : "$"
                    }}{{ row.xz_money }}</template
                  >
                </el-table-column>
                <el-table-column
                  prop="sb_money"
                  show-overflow-tooltip
                  label="社保金额"
                >
                  <template #default="{ row }"
                    >{{ row.sb_money_dw == 1 ? "¥" : "$"
                    }}{{ row.sb_money }}</template
                  >
                </el-table-column>
                <el-table-column
                  prop="status"
                  show-overflow-tooltip
                  label="结算状态"
                >
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag type="warning" v-if="row.js_status == 1"
                        >待结算</el-tag
                      >
                      <el-tag v-if="row.js_status == 2">待审核</el-tag>
                      <el-tag type="success" v-if="row.js_status == 3"
                        >已结算</el-tag
                      >
                      <el-tag type="danger" v-if="row.js_status == 4"
                        >已驳回</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="jsxz_time"
                  width="180"
                  show-overflow-tooltip
                  label="结算时间"
                />
                <el-table-column prop="jsxz_img" label="结算凭证">
                  <template #default="{ row }">
                    <tableBigImg
                      v-if="row.jsxz_img"
                      :propImg="row.jsxz_img.split(',')"
                      :src="row.jsxz_img.split(',')[0]"
                    ></tableBigImg>
                  </template>
                </el-table-column>
                <el-table-column prop="Name" width="160" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="detailFn(row.shipowner_manage_money_id)"
                      >
                        详情
                      </div>
                      <div class="blueText ctrlText" @click="upImg(row)">
                        {{ row.jsxz_img ? "重传凭证" : "上传凭证" }}
                      </div>
                      <div
                        class="blueText ctrlText"
                        v-if="row.js_status == 1 || row.js_status == 4"
                        @click="subFn(row)"
                      >
                        结算
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>他的证书（{{ total }}）</div>
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="number"
                  show-overflow-tooltip
                  label="证书编号"
                />
                <el-table-column
                  prop="name"
                  show-overflow-tooltip
                  label="证书名称"
                />
                <el-table-column
                  prop="sy_time"
                  show-overflow-tooltip
                  label="剩余时间"
                >
                  <template #default="{ row }">
                    <span v-if="row.time_ != '- -'">
                      <span v-if="row.time_ > 180"
                        >{{ row.time_ }}天后到期</span
                      >
                      <span
                        class="orgText"
                        v-if="row.time_ >= 0 && row.time_ <= 180"
                        >{{ row.time_ }}天后到期</span
                      >
                      <span v-if="row.time_ < 0" class="redText"
                        >已到期{{ row.time_ }}天</span
                      >
                    </span>
                    <span v-else>{{ row.time_ }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="time"
                  show-overflow-tooltip
                  label="到期时间"
                >
                  <template #default="{ row }">{{
                    row.time || "- -"
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  show-overflow-tooltip
                  label="证书状态"
                >
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag type="info" v-if="row.time_ == '- -'"
                        >未完善</el-tag
                      >
                      <div v-else>
                        <el-tag type="success" v-if="row.time_ > 180"
                          >正常</el-tag
                        >
                        <el-tag
                          type="warning"
                          v-if="row.time_ <= 180 && row.time_ >= 0"
                          >即将到期</el-tag
                        >
                        <el-tag type="danger" v-if="row.time_ < 0"
                          >已到期</el-tag
                        >
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="showUpRow"
        title="结算凭证"
        width="500"
        :close-on-click-modal="false"
      >
        <div>
          <upMoreImg v-if="showUpRow" @ok="getImg"></upMoreImg>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showUpRow = false">取消</el-button>
            <el-button type="primary" @click="saveUpImg"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
